<template>
	<view class="task" @touchstart="handlePageTouchStart">
		<uni-nav-bar leftIcon="back" @clickLeft="tolastPage" :statusBar="true" shadow :fixed="true" title="任务详情" color="#101010"
            backgroundColor="#fff"></uni-nav-bar>
		<!-- <view class="navigationBar" style="background-image: url('../..//static/imgs/headbg.png');">
			<tui-icon name="arrowleft" color="#ffffff" :size="50" class="navIcon" @click="tolastPage"></tui-icon>
			<view class="navText">任务详情</view>
		</view> -->
		<view class="conter">
			<view class="title">
				<view class="titleLeft">事件名称:</view>
				<view class="titleRight">
					<span style="background: #d9001b;" v-if="dataList.eventStatus == '0'">待接收</span>
					<span style="background: #fe7a21;" v-else-if="dataList.eventStatus == '1'">待完成</span>
					<span style="background: #137a29;" v-else-if="dataList.eventStatus == '2'">已完成</span>
					<span style="background: #5425a2;" v-else-if="dataList.eventStatus == '3'">已驳回</span>
					<span style="background: #5425a2;" v-else>其他</span>
				</view>
			</view>
			<view class="titlecon">{{dataList.eventName == undefined ? '' : dataList.eventName}}</view>
			<view class="conterList">事发地址：{{dataList.eventAddr == undefined ? '' : dataList.eventAddr}}</view>
			<view class="conterList">事发时间：{{dataList.eventTime == undefined ? '' : dataList.eventTime}}</view>
			<view class="conterList">事件描述：{{dataList.eventContent == undefined ? '' : dataList.eventContent}}</view>
			<view class="conterList">涉及人数：{{dataList.narrationNum == undefined ? '' : dataList.narrationNum}}</view>
			<view class="conterList">事发级别：{{dataList.eventLevel == undefined ? '' : dataList.eventLevel}}</view>
			<view class="conterList">情况反馈：{{dataList.eventFeedback == undefined ? '' : dataList.eventFeedback}}</view>
			<view class="conterList">流转时间：{{dataList.eventTime || ''}}</view>
			<view class="conterList" style="margin-bottom: 10rpx;">流转关系：</view>
			<span style="display: inline-block; margin:0 10rpx 10rpx 0;" v-for="i in dataList.eventAdminList" :key="i.id">
				<span class="bg">{{ i.createBy}}</span>流转至<span class="bg bg2">{{ i.changeToAdminName }}	</span>
			</span>
		</view>
		<view class="line" v-if="dataList.eventStatus == '2'"></view>
		<view class="conter" v-if="dataList.eventStatus == '2'">
			<view class="conterList">办结人员：{{dataList.completionName || ''}}</view>
			<view class="conterList">办结时间：{{dataList.eventTime == undefined ? '' : dataList.eventTime}}</view>
			<view class="conterList">办结反馈：{{dataList.completionFeedback || ""}}</view>
		</view>
		
		<view class="detaBut" v-if="userInfo.roleCode == 'tzwy' || userInfo.roleCode == 'tzb' && dataList.eventStatus == '0'">
			<span @click="towanderAbout('1')">流转</span>
			<span @click="towanderAbout('2')">驳回</span>
		</view>
		<view class="detaBut" v-if="userInfo.roleCode == 'gdw' || userInfo.roleCode == 'wgy' && dataList.eventStatus == '1'">
			<span @click="towanderAbout('3')">办结反馈</span>
		</view>
		<view v-if="showdialog" class="showDialog">
			<view class="boxWc">
				<view class="notification">
					<!-- 流转 -->
					<view class="notificationcon" v-if="ciriOrReject">
						<view class="showhide" @click="showdialog = false">关闭</view>
						<view class="notificationText">
							<span class="notificationTextspan">任务已成功接收，请及时流转</span>
							<multiSelect style="width: 100%;" :list="list" :selVal="selVal" @changee="bb"></multiSelect>
							<!-- <view class="selectPosi">
								<input type="text"  @input="e=>this.getCompletionNameDataList(e.detail.value)" placeholder="请选择" v-model="personnel" class="formListInputl" id="dropdowna" @click="toggleDropdown" />
								<view class="dropdown" v-show="showDropdown || options.length">
									<view v-if="!options.length" style="padding: 20rpx">未搜索到,请换关键字</view>
								  <view class="dropdown-item" v-for="(option, index) in options" :key="index" @click="toggleOption(index)" id="dropdowna">
									<view class="checkbox" id="dropdowna" :class="{ checked: selectedIndexes.includes(index) }"></view>
									<text id="dropdowna">{{ option }}</text>
								  </view>
								</view>
							</view> -->
						</view>
						<view class="notificationBut">
							<!-- <span @click="hideDialog('1')">上报</span> -->
							<span @click="hideDialog('2')">下发</span>
						</view>
					</view>
					<!-- 驳回 or 办结反馈 -->
					<view class="notificationcon" v-if="!ciriOrReject">
						<view v-if="bjfkActive" style="text-align: center; margin-top:20rpx; font-size: 30rpx;">任务已成功接收，请及时办结反馈</view>
						<view class="notificationconinput">
							<textarea v-model="bakCon" class="notInput" type="text" placeholder="请输入"></textarea>

							<radio-group class="radio" @change="(evt) => { dealStatus = evt.detail.value }">
								<radio value="2" :checked="dealStatus === '2'" />已办结<text class="left"></text>
								<radio value="1" :checked="dealStatus === '1'" />未办结<text class="left"></text>
								<radio value="3" :checked="dealStatus === '3'" />需联合办结
							</radio-group>
						</view>
						<view class="notificationButReject" v-if="!bjfkActive">
							<span @click="showdialog = false">取消</span>
							<span @click="hideDialog('3')">确定驳回</span>
						</view>
						<view class="notificationButRejectBh" v-if="bjfkActive">
							<span @click="hideDialog('3')">确定</span>
							<span @click="showdialog = false">取消</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<tui-tips ref="toast" position="center"></tui-tips>
		<view style="height: 4rem;"></view>
	</view>
</template>

<script>
import multiSelect from "../userViews/multiSelect"

import {mapState} from 'vuex'
	export default {
		components: { multiSelect },
		data() {
			return {
				selVal: [],
				dealStatus: '2',
				dataList:{},
				showdialog:false,
				ciriOrReject:true,
				
				showDropdown: false,
				personnel:'',
				options: [],	//下拉list
				eventAdminDataList:[],
				eventAdminList:[],
				selectedIndexes: [],
				bakCon:'',
				bjfkActive:false
			};
		},
		computed: {
			...mapState(["userInfo"]),
		},
		onLoad(option) {
			this.getCompletionNameDataList()
			this.$apis.listDesc(option.id).then(res => {
				this.dataList = res.data
			})
			
		},
		onUnload() {},
		onShow() {
			
		},
		methods: {
			getUserList(arr) {
				return arr!=undefined && arr.length && arr.map(i=>(i.createby+''+i.changeToAdminName)).join('，') || ''
			},
			bb(data) {
				this.selVal = data.a;
				this.eventAdminList =[];
				this.selVal.map((i) => {
				 	this.eventAdminList.push({
						eventId:this.dataList.id,
						adminId:i.id,
						sellLevel: this.convertSellLevel(i.roleCode)
					})
			  })
			},
			tolastPage(){
				wx.navigateBack({
				  delta: 1 
				})
			},
			// 流转 or 驳回
			towanderAbout(value){
				if(value == '1'){
					this.ciriOrReject = true
				}else{
					if(value == '3'){
						this.bjfkActive = true
					}else{
						this.bjfkActive = false
					}
					this.ciriOrReject = false
				}
				this.showdialog = true
			},
			
			toggleDropdown() {
				this.showDropdown = !this.showDropdown;
			},
			// 多选下拉
			toggleOption(index) {
			  if (this.selectedIndexes.includes(index)) {
				const position = this.selectedIndexes.indexOf(index);
				this.selectedIndexes.splice(position, 1);
			  } else {
				this.selectedIndexes.push(index);
			  }
			  this.personnel= this.selectedIndexes.map((index) => this.options[index]).join(', ');
			  this.eventAdminList = []
			  this.selectedIndexes.map((index) => {
				 this.eventAdminList.push({
					 eventId:this.dataList.id,
					 adminId:this.eventAdminDataList[index].id,
					 sellLevel: this.convertSellLevel(this.eventAdminDataList[index].roleCode)
				 })
			  })
			},
			convertSellLevel(value){
				if(value == 'tzwy'){
					return 0
				}else if(value == 'wgy'){
					return 1
				}else if(value == 'gdw'){
					return 2
				}else if(value == 'tzb'){
					return 3
				}
			},
			
			getCompletionNameDataList(v){
				this.$apis.completionData({
					searchKey: v
            }).then(res =>{
					this.options = []
					this.options = res.data.map(item => item.unitName+'-'+ item.adminName )
					this.eventAdminDataList = res.data
				})
			},
			handlePageTouchStart(event){
				if(this.showDropdown && event.target.id != 'dropdowna'){
					this.showDropdown = !this.showDropdown;
				}
			},
			async hideDialog(value){
				let options = {
					msg: '',
					duration: 2000
				};
				this.$api.showLoading();
				if(value == '1'){
					this.$api.hideLoading();
					console.log('上报成功')
				}else if(value == '2'){
					await this.$apis.wanderAbout(this.eventAdminList).then(res =>{
						this.$api.hideLoading();
						if(res.code == '20000'){
							options.msg="下发成功"
							this.$refs.toast && this.$refs.toast.showTips(options)
							setTimeout(() =>{
								this.showdialog = false
								wx.navigateBack({
								  delta: 1 
								})
							}, 2000)
						}
					})
				}else if(value == '3'){
					if(!this.bjfkActive){
						let data = {
							id: this.dataList.id,
							bak: this.bakCon
						}
						await this.$apis.rejectEvent(data).then(res =>{
							this.$api.hideLoading();
							if(res.code == '20000'){
								options.msg="驳回成功"
								this.$refs.toast && this.$refs.toast.showTips(options)
								setTimeout(() =>{
									this.showdialog = false
									wx.navigateBack({
									  delta: 1 
									})
								}, 2000)
							}
						})
					}else{
						let data = []						
						this.dataList.bak1 = this.bakCon
						this.dataList.settlementStatus = (this.dealStatus== 3 ? 2: this.dealStatus);
						this.dataList.eventStatus = this.dataList.settlementStatus;
						this.dataList.completionName = this.userInfo.adminName
						data.push(this.dataList)
						await this.$apis.getBatchUpdate(data).then(res =>{
							this.$api.hideLoading();
							if(res.code == '20000'){
								options.msg="办结反馈成功"
								this.$refs.toast && this.$refs.toast.showTips(options)
								setTimeout(() =>{
									this.showdialog = false
									wx.navigateBack({
									  delta: 1 
									})
								}, 2000)
							}
						})
						
					}
				} else {
					this.$api.hideLoading();
				}
			}

		}
	}
</script>

<style lang="scss">
.bg {
	padding: 2rpx 5rpx;
	background: #ff0000;
	color: #fff;
	border-radius: 10rpx;
	margin-bottom: 10rpx;
}
.bg2 {
	background: #0022ff;
}
.inputTop {
    width: 100% !important;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 9999;
    color: #333;
	padding: 0 20rpx;
	height: 60rpx;
	border-bottom: 1px solid #999;
}
	.radio {
		margin: 40rpx;
	}
	.left {
		margin-right: 50rpx;
	}
	.task{height: 100vh;}
	.navigationBar{position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 180rpx; background-size: 100% 100%;
		.navIcon{position: absolute; left: 0;}
		.navText{font-size: 45rpx;}
	}
	.conter{padding:30rpx 30rpx 50rpx 30rpx;
		.title{display: flex; align-items: center; justify-content: space-between;
			.titleLeft{font-size: 43rpx; font-weight: bold; color:#333333;}
			.titleRight{text-align: right;
				span{padding: 5rpx 15rpx; color: #ffffff; border-radius: 10rpx;}
			}
		}
		.titlecon{font-size: 43rpx; font-weight: bold; color:#333333; margin-bottom: 30rpx;}
		.conterList{margin: 30rpx 0; font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-weight: 400;  font-style: normal; color: #959CA6; font-size: 30rpx;}
	}
	.line{height: 1rpx; background: #929292;}
	
	.detaBut{ margin-top: 30rpx; text-align: center;
		span{padding: 20rpx 100rpx; border-radius: 15rpx; font-size: 35rpx; margin: 0 30rpx;}
		span:nth-child(1){ color: #ffffff;  background: linear-gradient(90deg, rgba(23, 72, 244, 1) 0%, rgba(46, 127, 243, 1) 100%);}
		span:nth-child(2){ color: #333333;  background: #ffffff; border: 1rpx solid rgba(2, 167, 240, 1);}
	}
	.showDialog{position: fixed; top: 0; width: 100%; height: 100%; z-index: 9999;
		.boxWc{position: relative; width: 100%; height: 100%;
			.notification{ position: absolute; left: 30rpx; top: calc(50% - 225rpx); height: 500rpx; width: calc(100% - 60rpx); background: #ffffff; border-radius: 15rpx; box-shadow:2px 2px 5px rgba(0, 0, 0, 0.349019607843137);
				.notificationcon{position: relative; width: 100%; height: 100%;
					.showhide{position: absolute; top: 20rpx; right: 20rpx; font-size: 34rpx;}
					.notificationText{ padding-top: 80rpx; width: 80%; margin: auto;
						.notificationTextspan{display: block; font-size: 40rpx; margin-bottom: 1rem; text-align: center;}
						.notificationInput{margin-top: 50rpx; padding-left: 30rpx; height: 75rpx; width: calc(100% - 150rpx);}
					}
					.notificationBut{ position: absolute; width: 100%; bottom: 80rpx; text-align: center;
						span{padding: 20rpx 100rpx; border-radius: 15rpx; font-size: 35rpx; margin: 0 30rpx;}
						span:nth-child(1){color: #ffffff; background: linear-gradient(90deg, rgba(23, 72, 244, 1) 0%, rgba(46, 127, 243, 1) 100%);}
						span:nth-child(2){color: #333333; background: #ffffff; border: 1rpx solid rgba(2, 167, 240, 1);}
					}
					.notificationconinput{ padding-top:80rpx;
						.notInput{margin-left: 30rpx; border: 1px solid #999; border-radius: 10rpx; height:130rpx; width: calc(100% - 70rpx); padding: 20rpx;}
					}
					.notificationButReject{position: absolute; width: 100%; bottom: 80rpx; text-align: center;
						span{ border-radius: 15rpx; font-size: 35rpx; margin: 0 30rpx;}
						span:nth-child(1){padding: 20rpx 100rpx; color: #ffffff; background: linear-gradient(90deg, rgba(23, 72, 244, 1) 0%, rgba(46, 127, 243, 1) 100%);}
						span:nth-child(2){padding: 20rpx 70rpx; color: #333333; background: #ffffff; border: 1rpx solid rgba(2, 167, 240, 1);}
					}
					.notificationButRejectBh{position: absolute; width: 100%; bottom: 80rpx; text-align: center;
						span{ border-radius: 15rpx; font-size: 35rpx; margin: 0 30rpx; padding: 20rpx 70rpx;}
						span:nth-child(2){ color: #ffffff; background: linear-gradient(90deg, rgba(23, 72, 244, 1) 0%, rgba(46, 127, 243, 1) 100%);}
						span:nth-child(1){ color: #333333; background: #ffffff; border: 1rpx solid rgba(2, 167, 240, 1);}
					}
				}
			}
		}
	}
	
	.selectPosi {position: relative; height:70rpx; width: calc(100% - 170rpx); margin-left: 85rpx; margin-top: 35rpx;
	  .formListInputl{text-align: left; border: 1rpx solid rgba(170, 170, 170, 0.5); border-radius: 10rpx; height: 100%; width: 100%; padding-left: 20rpx;}
	}
	.dropdown {
	  position: absolute;
	  top: 100%;
	  left: 0;
	  width: 100%;
	  max-height: 200px;
	  background: #fff;
	  border: 1px solid #ccc;
	  overflow-y: auto;
	  z-index: 999;
	}
	
	.dropdown-item {
	  display: flex;
	  align-items: center;
	  padding: 10px;
	  cursor: pointer;
	}
	
	.checkbox {
	  width: 16px;
	  height: 16px;
	  margin-right: 10px;
	  border: 1px solid #ccc;
	}
	
	.checked {
	  background-color: #007aff;
	}
	
	.click-overlay {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  z-index: 999;
	  background-color: transparent;
	}

</style>